<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>更新时的问题</title>
</head>
<body>
    <div id="root">
        <!-- 
            Vue.set,vm.#set不能修改 data根对象
        -->
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>校长：{{leader}}</h1>
        <h1>学生姓名:{{student.name}}</h1>
        <h1>学生年龄:{{student.age}}</h1>
        <h1 v-if="student.gender">学生性别:{{student.gender}}</h1>
        <button @click="addSex">添加学生姓名，默认是男</button>
        <h1>学生爱好:</h1>
        <ul>
            <li v-for="(item, index) in student.hobby">{{item}}</li>
        </ul>
        <h1>学生朋友:</h1>
        <ul>
            <li v-for="(item, index) in student.friends">{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
</body>
<script>
    //计算属性实现
    var vm = new Vue({
        el: '#root',
        data: {
            name: "尚硅谷",
            address: "北京",
            student:{
                name: "张三",
                age: 20,
                hobby:['抽烟', '喝酒', '烫头'],
                friends:[
                    {
                        name:"tony",
                        age:"18"
                    },
                    {
                        name:"jerry",
                        age:"19"
                    }
                ]
            }
        },
        methods:{
            addSex: function(){
                // Vue.set(this.student, "gender", "男");
                this.$set(this.student, "gender", "男");
            }
        }
    })      
</script>
</html>